<template>
  <div>
    <div class="JC1">
      <div class="JC2"></div>
      <div class="Jcyp">
        <h3 class="jcyp2">精彩影评</h3>
      </div>
    </div>
    <div class="allYP">
      <el-card class="box-card">
        <div v-for="(o, index) in len" :key="o" class="text item">
          <div class="allYP1">
            <div class="tx1">
              <el-image :src="headSrcs[index]" class="image2" width="100%" height="100%" />
            </div>
            <div>
              <span class="Name1">
                {{ comUser[index] }}
              </span>
            </div>
            <div>
              <span class="userT">
                {{ comAddTime[index] }}
              </span>
            </div>
            <div class="desn1">
              <span class="desn2">
                {{ comDesn[index] }}
              </span>
            </div>
            <el-divider></el-divider>
          </div>
        </div>
      </el-card>
    </div>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[4]"
        :page-size="4"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script setup>
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { ref, onMounted } from 'vue'
import '@/assets/scss/userCom/coms.scss'
const currentPage4 = ref(1)
const comUser = ref([])
const comAddTime = ref([])
const comDesn = ref([])
const commentAll = ref([])
const headSrcs = ref([])
const total = ref(0)
const len = ref(4)
onMounted(() => {
  const movieName = JSON.parse(sessionStorage.getItem('movieInfo'))
  axios.get('/api/movie/getMovieByMname/' + movieName).then((res) => {
    if (res.data !== null) {
      axios.get('/api/comment/getAllCommentByMid/' + res.data[0].mid).then((res1) => {
        if (res1.data !== null) {
          commentAll.value = res1.data
          total.value = commentAll.value.length

          const lens = total.value > 4 ? 4 : total.value
          len.value = lens
          for (let i = 0; i < len.value; i = i + 1) {
            comUser.value.push(commentAll.value[i].username)
            comAddTime.value.push(commentAll.value[i].addTime)
            comDesn.value.push(commentAll.value[i].desn)
            headSrcs.value.push(require('@/assets/UserPic/' + commentAll.value[i].headSrc))
          }
        } else {
          ElMessage({
            showClose: true,
            message: '网络错误！',
            type: 'error'
          })
        }
      })
    } else {
      ElMessage({
        showClose: true,
        message: '网络错误！',
        type: 'error'
      })
    }
  })
})
const handleCurrentChange = (val) => {
  currentPage4.value = val
  comUser.value = []
  comAddTime.value = []
  comDesn.value = []
  headSrcs.value = []
  const index = (val - 1) * 4
  const lens = total.value - index > 4 ? 4 : total.value - index

  len.value = lens
  for (let i = index; i < len.value + index; i = i + 1) {
    comUser.value.push(commentAll.value[i].username)
    comAddTime.value.push(commentAll.value[i].addTime)
    comDesn.value.push(commentAll.value[i].desn)
    headSrcs.value.push(require('@/assets/UserPic/' + commentAll.value[i].headSrc))
  }
}
</script>
